<template>
  <div v-if="showModel"
       class="model">
    <div class="modleContent">
      <div class="modelTitle">
        <img :src=info
             alt="">
      </div>
      <div class="modelBody">微信登录需要获取您的用户信息，请前往设置</div>
      <div class="btns">
        <button open-type="getUserInfo"
                class="agree"
                lang="zh_CN"
                @getuserinfo="getUser">去设置</button>
      </div>
    </div>
  </div>
</template>
<script>
import 'mp-weui/lib/style.css'
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState({
      timestamp: state => state.userToken.timestamp,
      token: state => state.userToken.token,
      uid: state => state.uid
    })
  },
  methods: {
    ...mapMutations(['appSetImg', 'getUid']),
    goLoginPageTimeOut () {
      setTimeout(function () {
        wx.navigateTo({
          url: '/pages/index/main'
        })
      }, 1000)
    }
  },
  onLaunch () {
    // 小程序更新
    const updateManager = wx.getUpdateManager()
    updateManager.onCheckForUpdate(function (res) {
      // 请求完新版本信息的回调
      // console.log(res.hasUpdate)
    })

    updateManager.onUpdateReady(function () {
      // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
      updateManager.applyUpdate()
    })

    updateManager.onUpdateFailed(function () {
      // 新的版本下载失败
    })

    // let $this = this
    // var that = this
    // // 判断是否登录
    // let token = wx.getStorageSync('token')
    // console.log(token)
    // if (!token) {
    //   that.goLoginPageTimeOut()
    //   console.log(12112131313)
    //   return
    // }
    // let $this = this
  },
  async  created () {

  },

  mounted () {
    let device = {
      width: wx.getSystemInfoSync().screenWidth,
      height: wx.getSystemInfoSync().screenHeight - 60
    }
    this.$store.commit('appSetDevice', device)
    // wx.hideTabBar()
  }

}
</script>

<style lang="stylus">
@import '../static/fonts/iconfont.css';

page {
  width: 100%;
  height: 100%;
  background: #f7f7f7;
  font-size: 26rpx;
  font-family: '宋体' Arial, Helvetica, sans-serif;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
  background: red;
}

/* this rule will be remove */
* {
  transition: width 2s;
  -moz-transition: width 2s;
  -webkit-transition: width 2s;
  -o-transition: width 2s;
}

::-webkit-scrollbar {
  display: none;
}

img {
  max-width: 100%;
}

checkbox .wx-checkbox-input {
  border-radius: 50%;
  width: 40rpx;
  height: 40rpx;
}

.model {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: white;
}

.modelTitle {
  width: 100%;
  text-align: center;

  img {
    width: 120rpx;
    height: 120rpx;
    margin-top: 100rpx;
  }
}

.modelBody {
  // height 140rpx
  width: 100%;
  color: #888888;
  font-size: 30rpx;
  margin: 50rpx 0;
  text-align: center;
}

.btns {
  height: 100rpx;

  button {
    line-height: 100rpx;
    text-align: center;
    color: #1ab588;
    font-size: 32rpx;
    height: 100%;
  }

  .agree {
    background: #0abb07;
    text-align: center;
    width: 360rpx;
    display: block;
    color: white;
    font-size: 36rpx;
    height: 100rpx;
    line-height: 100rpx;
    margin-left: auto;
    margin-right: auto;
  }
}

.showFabu {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #f7f7f7;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;

  p {
    font-size: 34rpx;
    color: #000;
  }

  .xianhuo {
    width: 50%;
    height: 200rpx;
    position: absolute;
    left: 0%;
    top: 50%;
    margin-top: -100rpx;
    text-align: center;

    img {
      width: 160rpx;
      height: 160rpx;
    }
  }

  .qiugou {
    width: 50%;
    height: 200rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -100rpx;
    text-align: center;

    img {
      width: 160rpx;
      height: 160rpx;
    }
  }
}

.show {
  display: block;
}

// loadingmore 没有更多数据时候提示
.showLastLine {
  text-align: center;
  margin-top: 30rpx;
  font-size: 24rpx;
  color: #666;
  position: relative;
}

.showLastLine::before {
  position: absolute;
  content: '';
  left: 30rpx;
  height: 2rpx;
  top: 50%;
  margin-top: -2rpx;
  background: #cccccc;
  width: 30%;
}

.showLastLine::after {
  position: absolute;
  content: '';
  right: 30rpx;
  height: 2rpx;
  top: 50%;
  margin-top: -2rpx;
  background: #cccccc;
  width: 30%;
}

.loading {
  text-align: center;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 24rpx;
  color: #ccc;
}

swiper {
  height: 300rpx;
}

.slide-image {
  height: 300rpx;
  width: 100%;

  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.ico-btn button {
  position: relative;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0px;
  padding-right: 0px;
  box-sizing: border-box;
  font-size: 0px;
  text-align: center;
  text-decoration: none;
  line-height: normal;
  border-radius: 0px;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  color: #000000;
  background-color: transparent;
}

.ico-btn button::after {
  border: 0;
}

.weui-bar__item_on {
  color: #1AAD19;
}

.hideCanvas {
  position: absolute;
  top: -500px;
  left: -500px;
  width: 100%;
  height: 500px;
  z-index: 1;
}

.icon-eyes, .ico-btn, .icon-praise {
  color: #999;
}

.fixedRight {
  position: fixed;
  right: 50rpx;
  bottom: 220rpx;
  width: 100rpx;
  height: 100rpx;

  div {
    display: inline-block;
    width: 100%;
    height: 100%;
    // background #009aff
    background: #1ab588;
    text-align: center;
    border-radius: 50%;

    img {
      width: 32rpx;
      height: 32rpx;
      margin-top: 16rpx;
    }

    p {
      font-size: 24rpx;
      color: white;
      text-align: center;
      line-height: 32rpx;
    }
  }
}

button[disabled] {
  color: white;
}

button[disabled]:not([type]) {
  color: rgba(255, 255, 255, 0.7);
  background: linear-gradient(to right, #04c373 0%, #00e999 100%);
}

.markBottom p button {
  position: relative;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0px;
  padding-right: 0px;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  line-height: normal;
  border-radius: 0px;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  color: #000000;
  background-color: transparent;
  font-size: 20px !important;
}

.button-hover {
  background-color: transparent;
}

button::after {
  border: 0;
}

.noData {
  height: calc(100% - 88rpx);

  img {
    position: absolute;
    display: block;
    width: 300rpx;
    height: 300rpx;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
}
</style>
